<template>
  <div :style="'background-image:url('+yctjBg+')'" class="bgBox">
    <div class="container">
      <!-- 顶部左右中奖号码和期数展示 -->
      <div class="forecom-top-header my_text_center">
        <div class="header-title">
          <div class="header-left-title">
            <p>距离{{countDownMsg.next_short_expect}}期开奖剩余</p>
          </div>
          <div class="header-right-title">
            <img src="../../assets/imgs/forecom-yellow-bg.png" alt="">
            <p class="right-title-periods">{{lotteryMsg.expect}}-{{lotteryMsg.short_expect}}期开奖号码</p>
            <p class="right-percent-text">准确率高达
              <span>{{percentNum}}</span>
            </p>
          </div>
        </div>
        <div class="header-content">
          <div class="header-content-innerBox">
            <div class="header-left-content">
              <div class="left-content-text">
                <p>已推荐：
                  <span>{{lotteryMsg.count-lotteryMsg.remaining_num}}</span>期 | 今日剩余：
                  <span>{{lotteryMsg.remaining_num}}</span>期</p>
              </div>
              <CountDown :TypeMessage='countDownMsg'></CountDown>
            </div>
            <div class="header-right-content">
              <span class="right-content-line"></span>
              <div class="right-content-winnum">

                <ul class="content-winnum-ul" :class="[this.$store.state.lotteryType == 'l28'?'content-winnum-ulpc':'']" v-if="this.$store.state.lotteryType !== 'pk10'">
                  <li class="content-winnum-li"  v-for="(item,index) in lotteryMsg.open_code" :key="index">{{item}}</li>
                </ul>
                <ul class="content-winnum-ul content-winnum-ulbj" v-if="this.$store.state.lotteryType == 'pk10'">
                  <li class="content-winnum-li content-winnum-libj" v-for="(item,index) in lotteryMsg.open_code" :key="index">{{item.number}}</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部表格展示 -->
      <div class="forecom-bottom-details">
        <div class="bottom-query-area">
          <div class="query-area-line"></div>
          <span class="query-area-input-outbox">统计
            <input v-model="queryNum" type="text" class="query-area-input my_text_center">&nbsp;期</span>
          <button class="query-area-btn" @click="queryData">查询</button>
        </div>
        <div class="forecast-plan-title">
          <img class="forep-title-icon" src="../../assets/imgs/yucejihua-icon.png" alt="">
          <span class="forep-title-title">预测计划</span>
          <ul class="forep-title-ul">
            <li :class="{active:item.status}" class="forep-title-li my_text_center" v-for="(item,index) in forePLists" :key="index" @click="tabsListChange(index,item.id)">{{item.title}}</li>
          </ul>
        </div>
        <div class="forecast-plan-line">
          <div class="line-innerBox"></div>
        </div>
        <div class="plan-details-table">
          <div class="plan-details-intro">
            <p>说明：我们
              <span>3期一个计划</span>，计划中奖则更新计划，3期不中也更新计划；网页自动更新计划，用户无需手动刷新。</p>
          </div>
          <PlanTable :tableLists="parentTableLists" v-if="this.$store.state.lotteryType != 'pk10' && this.$store.state.lotteryType != 'l28'"></PlanTable>
          <PlanTablePc :tableLists="parentTableLists" v-if="this.$store.state.lotteryType == 'l28'"></PlanTablePc>
          <PlanTableBj :tableLists="parentTableLists" v-if="this.$store.state.lotteryType == 'pk10'"></PlanTableBj>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CountDown from "./components/CountDown";
import PlanTable from "./components/PlanTable";
import PlanTablePc from "../jndpc/PlanTablePc";
import PlanTableBj from "../bj10/ForPlanTableBj";

export default {
  components: {
    CountDown,
    PlanTable,
    PlanTablePc,
    PlanTableBj
  },
  data() {
    return {
      parentTableLists: [],
      forePLists: [],
      forePTabList: [],
      queryNum: 30,
      lotteryMsg: {},
      countDownMsg: {},
      itemId: null, //tabsID
      yctjDataList: null,
      winningphasenum: "", //当前期数
      yctjBg: null,
      percentNum: null
    };
  },
  mounted() {
    this.getBgImg();
    this.getForePList();
    this.getForePrecent();
  },
  watch: {
    getForecast: function(res) {
      // console.log(res)
      // 如果推送回来数据与路由彩种id相同，否则不操作数据
      if (res.lottery_id == this.$route.params.caizhongID) {
        res.data.forEach((el, i) => {
          if (el.label_id == this.itemId) {
            this.yctjDataList = el.data;
          }
        });
        // 推送回来的期数不等于页面原有期数，做数据更新
        // 表格更新逻辑，清除先前表数据第一条，插入新推送数据两条；
        if (this.winningphasenum != this.yctjDataList[0].winningphasenum) {
          this.winningphasenum = this.yctjDataList[0].winningphasenum;
          this.parentTableLists.shift();
          if (res.lottery_id == this.$route.params.caizhongID) {
            for (let i = this.yctjDataList.length - 1; i >= 0; i--) {
              this.parentTableLists.unshift(this.yctjDataList[i]);
            }
          }
            if (this.parentTableLists[1].phasenum == this.parentTableLists[2].phasenum) {
              if (this.parentTableLists[1].status == this.parentTableLists[2].status) {
                this.parentTableLists.splice(2,1);
              } else if (this.parentTableLists[1].status != this.parentTableLists[2].status ) {
                if (this.parentTableLists[2].status == "挂") {
                  this.parentTableLists.splice(2,1);
                } else if (this.parentTableLists[1].status == "挂") {
                  this.parentTableLists.splice(1,1);
                }
              }
            }
            // console.log("unshift>>>", this.parentTableLists);
        }
      }
    },
    getStore: function(res) {
      // 如果推送回来数据与路由彩种id相同，则更改数据；否则不变
      if (res.lottery_id == this.$route.params.caizhongID) {
        this.lotteryMsg = res.lotteryData;
        this.log(res);
        this.countDownMsg = res.countdown_time;
      }
    },
    $route: "fetchData"
  },
  methods: {
    // 获取背景图
    getBgImg() {
      this.axios
        .get("hall/getObtainLotteryInfo", {
          params: {
            lottery_id: this.$route.params.caizhongID
          }
        })
        .then(res => {
          if (res.data.status) {
            this.lotteryMsg = res.data.data.lotteryData;
            this.yctjBg = this.lotteryMsg.background_image;
            this.countDownMsg = res.data.data.countdown_time;
          }
        })
        .catch(err => {
          this.log(err);
        });
    },
    // 获取tabs信息
    getForePList() {
      this.axios
        .get("analyse/getObtainLotteryLabelMenu", {
          params: {
            lottery_id: this.$route.params.caizhongID
          }
        })
        .then(res => {
          if (res.data.status) {
            this.forePLists = res.data.data[2].tablists;
            this.itemId = this.forePLists[0].id;
            this.forePLists[0].status = 1;
            if (this.queryNum > 200) {
              this.queryNum = 200;
            }
            this.getForePTableList(this.itemId, this.queryNum);
          }
        })
        .catch(err => {
          this.log(err);
        });
    },
    // 获取底部表格数据
    getForePTableList(labelID, limit) {
      this.axios
        .get("forecast/getObtainForecastListById", {
          params: {
            lottery_id: this.$route.params.caizhongID,
            label_id: labelID,
            limit: this.queryNum
          }
        })
        .then(res => {
          if (res.data.status) {
            this.parentTableLists = res.data.data.list;
            this.winningphasenum = this.parentTableLists[0].winningphasenum;
          }
        })
        .catch(err => {
          this.log(err);
        });
    },
    // 获取预测准确率
    getForePrecent() {
      this.axios
        .get("/Forecast/getObtainForecastPrecisionRate", {
          params: {
            lottery_id: this.$route.params.caizhongID
          }
        })
        .then(res => {
          if (res.data.status) {
            // this.planForecastData = res.data.data;
            this.percentNum = res.data.data.accuracy_rate;
          } else {
            this.log(res.data.message);
          }
        })
        .catch(err => {
          this.log(err);
        });
    },
    // tabs切换
    tabsListChange(index, itemId) {
      this.itemId = itemId;
      this.forePLists.forEach((item, key) => {
        if (key === index) {
          item.status = 1;
        } else {
          item.status = 0;
        }
      });
      this.getForePTableList(itemId, this.queryNum);
    },
    queryData() {
      if (this.queryNum > 200) {
        this.queryNum = 200;
      } else if (this.queryNum <= 0) {
        this.queryNum = 1;
      }
      this.getForePTableList(this.itemId, this.queryNum);
    },
    fetchData() {
      if (this.$route.params.caizhongID) {
        this.lotteryMsg = {};
        this.queryNum = 30;
        this.getBgImg();
        this.getForePList();
        this.getForePrecent();
      }
    }
  },
  computed: {
    getForecast() {
      return this.$store.state.Forecast;
    },
    getStore() {
      return this.$store.state.TypeMessage;
    }
  }
};
</script>
<style lang="less">
@import url(../../assets/css/forecastrecommend.less);
@import url(../../assets/css/forplantablebj.less);
</style>


